<template>
	<view>
		<view class="top-box">
			<uni-nav-bar leftIcon="left" title="地市产业政策" statusBar :border="false" backgroundColor="#FFFFFF"
				@clickLeft="handleBack"></uni-nav-bar>

			<wCard flexDirection="row" marginTop="18" paddingBottom="27" paddingLeft="13" paddingTop="18">
				<tagItem v-for="(item, index) in articleClassification" :key="index" :itemIndex="item.id + ''"
					:itemData="item" :selectIndexList="selectIndexList" @itemClickIndex="itemClickIndex" />
			</wCard>
		</view>
		<u-list @scrolltolower="scrolltolower" style="margin-top: 20rpx; background: white;">
			<u-list-item v-for="(item, index) in articleList" :key="index">
				<u-cell :customStyle="{ background: 'white' }" :title="item.name" :label="item.create_at" center isLink
					:url="`/pages/articleList/details?id=${item.code}`">
					<template #value>
						<image class="cover" :src="item.cover" mode="scaleToFill"></image>
					</template>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>

<script setup>
import {
	ref,
	reactive
} from 'vue'
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	getArticleClassification,
	getArticleList
} from '@/api/index.js'
import wCard from '@/components/w-card.vue'
import tagItem from '@/components/tagItem.vue'

const articleClassification = ref([])
const articleList = ref([])
const selectIndexList = ref([])
const searchData = reactive({
	cateids: ''

});
onLoad((options) => {
	if (options.cateids) {
		searchData.cateids = options.cateids
		selectIndexList.value = [options.cateids]
	}
	getCateData()
	getData()
})


const getCateData = async () => {
	let res = await getArticleClassification()
	if (res?.code) {
		console.log(res.data);
		articleClassification.value = res.data || []
	}
}
const getData = async () => {
	let res = await getArticleList(searchData)
	if (res?.code) {
		console.log(res.data);
		articleList.value = res.data.list || []
	}
}

const handleBack = () => {
	uni.navigateBack()
}

const itemClickIndex = (cateid) => {
	if (selectIndexList.value.includes(cateid)) {
		selectIndexList.value = []
		searchData.cateids = ''
	} else {
		selectIndexList.value = [cateid]
		searchData.cateids = cateid
	}
	getData()
}
const scrolltolower = () => {
	console.log('loadmore');
};
</script>
<style lang="scss" scoped>
.top-box {
	position: sticky;
	top: 0;
	margin-bottom: 20rpx;
	z-index: 9;
}

.cover {
	width: 186rpx;
	margin-left: 24rpx;
	margin-top: 27rpx;
	height: 190rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
</style>